<template>
  <bpm-c-toptitle :title="bpmcoreI18n.history"
                  :isCollapse="false">
    <div class="area">
    <table cellpadding="0" cellspacing="1" border="0" class="historyTable">
      <thead>
      <tr>
        <th width="5%" data-i18n="historyListIndex">{{bpmcoreI18n.historyListIndex}}</th>
        <th width="34%" data-i18n="historyListActName">{{bpmcoreI18n.taskName}}</th>
        <th width="12%" data-i18n="historyListUserName">{{bpmcoreI18n.historyListUserName}}</th>
        <th width="12%" data-i18n="historyListOperate">{{bpmcoreI18n.historyListOperate}}</th>
        <th width="16%" data-i18n="historyListReceTime">{{bpmcoreI18n.historyListReceTime}}</th>
        <th width="16%" data-i18n="historyListCompTime">{{bpmcoreI18n.historyListCompTime}}</th>
        <th width="5%" data-i18n="historyListUserTime">{{bpmcoreI18n.historyListUserTime}}</th>
      </tr>
      </thead>
      <tbody>
      <template v-for="(val,i) in showTaskDones">
      <tr :key="i">
        <td rowspan="2">{{i+1}}</td>
        <td>{{val.activityName}}</td>
        <td>{{val.userName}}</td>
        <td>{{val.operation}}</td>
        <td>{{val.receivedTime}}</td>
        <td>{{val.completeTime}}</td>
        <td>{{val.fetchTime}}</td>
      </tr>
      <tr :key="'list' + i">
        <td colspan="6" align="left">{{val.comments}}</td>
      </tr>
      </template>
      </tbody>
    </table>
    </div>
  </bpm-c-toptitle>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'bpmDHislistarea',
  data () {
    return {
    }
  },
  methods: {
  },
  computed: {
    ...mapState(['taskDones', 'bpmcoreI18n', 'lang', 'langEnum', 'C_OPERATION_SUBMIT', 'C_OPERATION_REASSIGN', 'C_OPERATION_INVOLVE', 'C_OPERATION_REJECT', 'C_OPERATION_REPLACEOWNER', 'C_COMPLETE_TYPE_COMPLETEINVOLVE']),
    showTaskDones: function () {
      let showTaskDonesInfo = []
      showTaskDonesInfo[0] = {}
      showTaskDonesInfo[0].activityName = ''
      showTaskDonesInfo[0].comments = ''
      showTaskDonesInfo[0].completeTime = ''
      showTaskDonesInfo[0].receivedTime = ''
      showTaskDonesInfo[0].userName = ''
      showTaskDonesInfo[0].operation = ''
      showTaskDonesInfo[0].fetchTime = ''
      for (let i = 0; i < this.taskDones.length; i++) {
        let taskDone = this.taskDones[i]
        console.log('taskDone->', taskDone)
        showTaskDonesInfo[i] = {}
        if (this.lang === 'zh') {
          showTaskDonesInfo[i].activityName = taskDone.activityName.substr(0, taskDone.activityName.indexOf('@'))
        } else {
          showTaskDonesInfo[i].activityName = taskDone.activityName.substr(taskDone.activityName.indexOf('@') + 1)
        }
        console.log('activityName->', showTaskDonesInfo[i].activityName)
        let operate = ''
        if (taskDone.operation === null || taskDone.operation === '' || typeof taskDone.operation === 'undefined') {
          operate = 'submit'
        } else {
          operate = taskDone.operation.toLowerCase()
        }
        let operateName = ''
        if (operate === this.C_OPERATION_SUBMIT.toLowerCase()) {
          operateName = (this.lang === this.langEnum.zh ? '提交' : 'Submit')
        } else if (operate === this.C_OPERATION_REASSIGN.toLowerCase()) {
          operateName = (this.lang === this.langEnum.zh ? '转办' : 'Reassign')
        } else if (operate === this.C_OPERATION_INVOLVE.toLowerCase()) {
          operateName = (this.lang === this.langEnum.zh ? '加签' : 'Involve')
        } else if (operate === this.C_OPERATION_REJECT.toLowerCase()) {
          operateName = (this.lang === this.langEnum.zh ? '驳回' : 'Reject')
        } else if (operate === this.C_OPERATION_REPLACEOWNER.toLowerCase()) {
          operateName = (this.lang === this.langEnum.zh ? '替换处理人' : 'ReplaceOwner')
        } else if (operate === this.C_COMPLETE_TYPE_COMPLETEINVOLVE.toLowerCase()) {
          operateName = (this.lang === this.langEnum.zh ? '完成加签' : 'completeInvolve')
        }
        showTaskDonesInfo[i].operation = operateName

        let taskComments = taskDone.comments
        if (taskComments === '同意@OK') {
          if (this.lang === this.langEnum.zh) {
            taskComments = '同意'
          } else {
            taskComments = 'OK'
          }
        }
        showTaskDonesInfo[i].comments = taskComments
        showTaskDonesInfo[i].userName = taskDone.userName
        if (!taskDone.hasOwnProperty('receivedTime')) {
          taskDone.receivedTime = taskDone.completeTime
        }
        showTaskDonesInfo[i].completeTime = this.toLocaleDate(taskDone.completeTime)
        showTaskDonesInfo[i].receivedTime = this.toLocaleDate(taskDone.receivedTime)
        showTaskDonesInfo[i].fetchTime = this.countDate(showTaskDonesInfo[i].completeTime, showTaskDonesInfo[i].receivedTime) // taskDone.completeTime - taskDone.receivedTime
      }
      return showTaskDonesInfo
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .historyTable {
    font-size: 12px;
    background-color: #E3E3E3;
    width: 980px;
    padding: 0px;
    margin: 0px;
  }
  .area {
    width: 100%;
    min-height: 900px;
    background-color: #EFF3F6;
  }
  .historyTable thead tr {
    background-color: #F4F4F4;
    height: 24px;
    text-align: center;
  }
  .historyTable tbody tr {
    background-color: #EFF3F6;
    height: 24px;
    text-align: center;
  }
  th, td {
    padding: 0px;
    border-bottom: none;
  }
  tbody {
    padding: 0;
    margin: 0;
  }
  .historyTable thead tr th {
    font-weight: 100;
  }
</style>
